// ------------------------------
// // edX Web Certificates: Certificate Rendering - Layouts

// About: (specifically for certificate rendering) styling layouts and responsive support.

// #ACCOMPLISHMENT - BASE

// ------------------------------
// #ACCOMPLISHMENT - BASE
// ------------------------------
.accomplishment-rendering {
  @extend %depth-2;
  margin: 2%;
  border: 1px solid palette(grayscale-cool, light);
  padding: 7% 5% 5% 5%;
  background-color: palette(grayscale, white);
  text-align: center;

  @include susy-breakpoint($bp-screen-md, $susy) {
    @include text-align(left);
    padding: 5% 5% 3%;
  }

  .background-watermark .watermark-svg {
    position: absolute;
    left: inherit;
    top: inherit;
    opacity: 0.03;
  }

  .micromasters-watermark {
    fill: $micromasters-watermark-color;
  }

  .xseries-watermark {
    fill: $xseries-color;
  }

  .professional-certificate-watermark {
    fill: $professional-certificate-watermark-color;
  }
}

.wrapper-accomplishment-title {

  .accomplishment-title {
    display: block;
    margin-top: spacing-vertical(x-small);
    margin-bottom: spacing-vertical(base);

    svg {
      width: 250px;
    }

    @include susy-breakpoint($bp-screen-md, $susy) {
      display: inline-block;
      vertical-align: middle;
      width: span(6 of 12);
      svg {
        width: 275px;
      }
    }

    @include susy-breakpoint($bp-screen-lg, $susy) {
      width: span(6 of 12);
      svg {
        width: 300px;
      }
    }

    .micromasters-logo {
      fill: $micromasters-color;
    }

    .xseries-logo {
      fill: $xseries-color;
    }

    .professional-certificate-logo {
      fill: $professional-certificate-color;
    }
  }
}

.wrapper-accomplishment-orgs {
  margin-bottom: spacing-vertical(small);
  margin-top: spacing-vertical(small);
  text-align: center;

  @include susy-breakpoint($bp-screen-md, $susy) {
    @include margin-left(gutter(inside));
    @include text-align(right);
    display: inline-block;
    vertical-align: middle;
    width: span(6 of 12);
    margin-top: 0;
    margin-bottom: spacing-vertical(base);
  }

  @include susy-breakpoint($bp-screen-lg, $susy) {
    width: span(6 of 12);
  }
}

.accomplishment-statement {
  margin-top: spacing-vertical(small);
  margin-bottom: spacing-vertical(base);
  border-bottom: 1px solid palette(grayscale-cool, light);
  padding-bottom: spacing-vertical(small);

  @include susy-breakpoint($bp-screen-lg, $susy) {
    display: inline-block;
    vertical-align: middle;
    width: span(8 of 12);
    margin-top: spacing-vertical(base);
    margin-bottom: spacing-vertical(base);
    border: 0;
  }

  .accomplishment-recipient,
  .accomplishment-course,
  .accomplishment-program,
  .accomplishment-summary,
  .accomplishment-statement-detail {
    display: block;
    margin-bottom: spacing-vertical(small);
  }
}

.accomplishment-signatories {
  border-bottom: 1px solid palette(grayscale-cool, light);
  padding-bottom: spacing-vertical(small);

  @include susy-breakpoint($bp-screen-lg, $susy) {
    @include margin-left(gutter(inside));
    @include text-align(right);
    display: inline-block;
    vertical-align: top;
    width: span(4 of 12);
    border-bottom: 0;
    padding-bottom: 0;
  }
}

.signatory {
  @include gallery(12 of 12);
  float: none; // unset the gallery float to prevent overlap

  @include susy-breakpoint($bp-screen-md, $susy) {
    @include gallery(6 of 12);
  }

  @include susy-breakpoint($bp-screen-lg, $susy) {
    @include gallery(12 of 12);
    float: none; // unset the gallery float to prevent overlap
  }
}

.wrapper-accomplishment-stamps {
  margin-top: spacing-vertical(base);
}

.accomplishment-stamps {
  @extend %list-unstyled;

  .accomplishment-stamp-platform {
    margin-bottom: 15px;

    // FIXME This is edx.org-specific and belongs in a themed stylesheet in credentials-themes
    svg.edx-logo {
      width: 125px;
      height: 57.8px;
      margin-top: 2px;
    }

    @include susy-breakpoint($bp-screen-lg, $susy) {
      display: inline-block;
      vertical-align: middle;
      @include margin-right(25px);
      margin-bottom: 10px;
    }
  }

  .accomplishment-stamp-date {
    margin-bottom: 10px;

    @include susy-breakpoint($bp-screen-lg, $susy) {
      display: inline-block;
      vertical-align: middle;
      @include margin-right(25px);
    }
  }

  .accomplishment-stamp-validity {
    margin-bottom: 10px;

    @include susy-breakpoint($bp-screen-lg, $susy) {
      display: inline-block;
      vertical-align: middle;
      @include margin-right(25px);
    }
  }

  .accomplishment-stamp-effort {
    margin-bottom: 10px;

    @include susy-breakpoint($bp-screen-lg, $susy) {
      display: inline-block;
      vertical-align: middle;
    }
  }
}
